<template>
    <div class="home-banner">
      <XtxCarousel :sliders="sliders" auto-play />
    </div>

  </template>
  <script setup>
import { ref } from 'vue';
import { findBanner } from '@/api/home.js';

  // export default {
  //   name: 'HomeBanner',
  //   setup () {
  //       const sliders = ref([])
  //       findBanner().then(data => {
  //           sliders.value = data.result
  //       })

  //       return { sliders }
  //   }
  // }

const sliders = ref([
  {id: '16', imgUrl: '/src/img/home/banner/01.jpg', hrefUrl: '/category/1005000', type: '1'},
  {id: '17', imgUrl: '/src/img/home/banner/02.jpg', hrefUrl: '/category/1005000', type: '1'},
  {id: '18', imgUrl: '/src/img/home/banner/03.jpg', hrefUrl: '/category/1005000', type: '1'},
  {id: '19', imgUrl: '/src/img/home/banner/04.jpg', hrefUrl: '/category/1005000', type: '1'},
  {id: '20', imgUrl: '/src/img/home/banner/05.jpg', hrefUrl: '/category/1005000', type: '1'}]
  )

  </script>
  <style scoped lang="less">
  .home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98
  }

  .xtx-carousel {
  :deep(.carousel-btn.prev) {
    left: 20px;
  }
  :deep(.carousel-indicator) {
    padding-left: 250px;
  }
}
  </style>